*{
    padding: 0;
    margin: 0;
}
ul li{
    list-style: none;
}
.content{
    min-width: 1400px;
}
nav{
    min-width: 1400px;
    position: fixed;
    width:100%;
    height:88px;
    background: rgba(10,19,41,.3);
    color: #fff;
    z-index: 100;
    .maxwidth{
        max-width: 1400px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        .logo{
            width: 140px;
            img{
                width:100%;
                display: block;
            }
        }
        >ul{
            height:100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content:space-between;
            >li{
                height: 100%;
                line-height: 88px;
                padding: 0 25px 0 30px;
                box-sizing: border-box;
                cursor: pointer;
                position: relative;
                >a{
                    color:#fff;
                    font-size: 16px;
                    letter-spacing: 3px;
                    text-decoration: none;
                    display: block;
                    height:100%;
                    position: relative;
                    .line{
                        display: block;
                        width: 42px;
                        height: 1px;
                        background: #ffc306;
                        position: absolute;
                        left: calc(50% - 21px);
                        bottom: 10px;
                        opacity: 0;
                        transition: bottom,opacity 0.3s linear;
                    }
                }
                ul{
                    position: absolute;
                    top:88px;
                    left:0;
                    width: 120%;
                    background: rgba(0,0,0,0.5);
                    padding: 10px 0;
                    box-sizing: border-box;
                    display: none;
                    li{
                        text-align: left;
                        a{
                            color:#fff;
                            text-decoration: none;
                            padding-left: 30px;
                            box-sizing: border-box;
                            display: block;
                            height:40px;
                            line-height: 40px;
                        }
                    }
                    li:hover>a{
                        color:#ffc306;
                    }
                }
            }
            >li:hover{
                >a{
                    color:#ffc306;
                    .line{
                        opacity: 1;
                        bottom:20px
                    }
                }
                ul{
                    display: block;
                }
            }
        }
    }
}
.footer{
    background: #0d1323;
    .top{
        width: 100%;
        border-bottom: 2px solid #26272d;
        .litbox{
            width: 1400px;
            margin: 0 auto;
            padding:100px 20px 50px;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            .logo{
                width: 286px;
                img{
                    display: block;
                    width: 100%;
                }
            }
            .menu{
                width: 720px;
                .navlist{
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 40px;
                    li{
                        position: relative;
                        width: 120px;
                        text-align: center;
                        a{
                            color: #fff;
                            display: block;
                            width:100%;
                            text-decoration: none;
                            letter-spacing: 4px;
                        }
                    }
                    li::after{
                        content: '';
                        display: block;
                        position: absolute;
                        right:0;
                        top:4px;
                        width: 1px;
                        height: 14px;
                        background: #6b798e;
                    }
                    li:last-child::after{
                        opacity: 0;
                    }
                }
                .contact{
                    padding: 0 50px;
                    box-sizing: border-box;
                    line-height: 40px;
                    li{
                        display: block;
                        color:#6b798e;
                        font-size: 14px;
                    }
                }
            }
            .qrcode{
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                width: 280px;
                div{
                    width: 124px;
                    height:124px;
                    img{
                        display: block;
                        width: 100%;
                    }
                }
                div:nth-child(1){
                    border-radius: 15px;
                    overflow: hidden;
                }
            }
        }
    }
    .bottom{
        max-width: 1400px;
        margin: 0 auto;
        text-align: center;
        padding: 40px 0;
        box-sizing: border-box;
        .title{
            color: #fff;
            font-size: 16px;
            letter-spacing: 3px;
            margin-bottom: 30px;
        }
        ul{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 40px;
            list-style-type: none;
            margin-bottom: 50px;
            li{
                a{
                    color:#6b798e;
                    text-decoration: none;
                }
            }
        }
        .beian{
            text-align: center;
            color: #fff;
            text-decoration: none;
            font-size: 13px;
            letter-spacing: 2px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            a{
                color: #fff;
                text-decoration: none;
                font-size: 13px;
                margin-right: 20px;
                display: block;
            }
            .ga{
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
                img{
                    display: block;
                    width: 20px;
                    margin-right: 10px;
                }
            }
        }
    }
}
